/*
 * 侧边栏标签组件 - Sidebar Tags Component
 * 整合个人信息、天气信息和标签列表
 */
import { ClockCircleOutlined } from '@ant-design/icons';
import { Card } from 'antd';
import React, { useEffect, useState } from 'react';
import PersonInfo from './PersonInfo';
import WeatherInfo from './WeatherInfo';
import styles from './index.less';
import TagComponent from './tag';

const SidebarTags: React.FC = () => {
  const [runningTime, setRunningTime] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0,
  });
  const [prevTime, setPrevTime] = useState({
    hours: '00',
    minutes: '00',
    seconds: '00',
  });

  useEffect(() => {
    // 计时器逻辑
    const startTime = new Date('2025-09-03T16:09:00').getTime();

    const updateTimer = () => {
      const now = new Date().getTime();
      const timeDiff = now - startTime;

      if (timeDiff > 0) {
        const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
        const hours = Math.floor(
          (timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
        );
        const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);

        const newTime = {
          hours: String(hours).padStart(2, '0'),
          minutes: String(minutes).padStart(2, '0'),
          seconds: String(seconds).padStart(2, '0'),
        };

        const newDays = String(days).padStart(3, '0');

        // 检查是否有变化，触发翻转动画
        if (
          newTime.hours !== prevTime.hours ||
          newTime.minutes !== prevTime.minutes ||
          newTime.seconds !== prevTime.seconds ||
          newDays !== String(runningTime.days).padStart(3, '0')
        ) {
          // 更新翻转数字
          const flipDigits = document.querySelectorAll(`.${styles.flipDigit}`);
          const timeString =
            newDays + newTime.hours + newTime.minutes + newTime.seconds;

          flipDigits.forEach((digit: any, index: number) => {
            const newValue = timeString.charAt(index);
            const oldValue = digit.dataset.now;

            if (oldValue && oldValue !== newValue) {
              // 设置新的数据属性
              digit.dataset.old = oldValue;
              digit.dataset.now = newValue;

              // 移除翻转类
              digit.classList.remove('flip');

              // 强制重绘
              void digit.offsetLeft;

              // 添加翻转类
              digit.classList.add('flip');
            } else if (!oldValue) {
              // 初始化
              digit.dataset.old = newValue;
              digit.dataset.now = newValue;
            }
          });

          setPrevTime(newTime);
        }

        setRunningTime({ days, hours, minutes, seconds });
      }
    };

    // 立即更新一次
    updateTimer();

    // 每秒更新一次
    const timer = setInterval(updateTimer, 1000);

    // 清理定时器
    return () => {
      clearInterval(timer);
    };
  }, [prevTime, runningTime.days]);

  return (
    <div className={styles.sidebarTags}>
      {/* 个人信息卡片 */}
      <PersonInfo />

      {/* 天气卡片 */}
      <WeatherInfo />

      {/* 运行时间计时器卡片 */}
      <Card className={`${styles.card} ${styles.timerCard}`}>
        <div className={styles.timerContainer}>
          <div className={styles.timerHeader}>
            <ClockCircleOutlined className={styles.timerIcon} />
            <span className={styles.timerTitle}>运行时间</span>
          </div>
          <div className={styles.flipClock}>
            <span
              className={styles.flipDigit}
              data-old={String(runningTime.days).padStart(3, '0')[0]}
              data-now={String(runningTime.days).padStart(3, '0')[0]}
            >
              &nbsp;
            </span>
            <span
              className={styles.flipDigit}
              data-old={String(runningTime.days).padStart(3, '0')[1]}
              data-now={String(runningTime.days).padStart(3, '0')[1]}
            >
              &nbsp;
            </span>
            <span
              className={styles.flipDigit}
              data-old={String(runningTime.days).padStart(3, '0')[2]}
              data-now={String(runningTime.days).padStart(3, '0')[2]}
            >
              &nbsp;
            </span>
            <span className={styles.timeSeparator}>:</span>
            <span
              className={styles.flipDigit}
              data-old={String(runningTime.hours).padStart(2, '0')[0]}
              data-now={String(runningTime.hours).padStart(2, '0')[0]}
            >
              &nbsp;
            </span>
            <span
              className={styles.flipDigit}
              data-old={String(runningTime.hours).padStart(2, '0')[1]}
              data-now={String(runningTime.hours).padStart(2, '0')[1]}
            >
              &nbsp;
            </span>
            <span className={styles.timeSeparator}>:</span>
            <span
              className={styles.flipDigit}
              data-old={String(runningTime.minutes).padStart(2, '0')[0]}
              data-now={String(runningTime.minutes).padStart(2, '0')[0]}
            >
              &nbsp;
            </span>
            <span
              className={styles.flipDigit}
              data-old={String(runningTime.minutes).padStart(2, '0')[1]}
              data-now={String(runningTime.minutes).padStart(2, '0')[1]}
            >
              &nbsp;
            </span>
            <span className={styles.timeSeparator}>:</span>
            <span
              className={styles.flipDigit}
              data-old={String(runningTime.seconds).padStart(2, '0')[0]}
              data-now={String(runningTime.seconds).padStart(2, '0')[0]}
            >
              &nbsp;
            </span>
            <span
              className={styles.flipDigit}
              data-old={String(runningTime.seconds).padStart(2, '0')[1]}
              data-now={String(runningTime.seconds).padStart(2, '0')[1]}
            >
              &nbsp;
            </span>
          </div>
          <div className={styles.startTimeInfo}>
            <span>开始时间: 2025-09-04 16:09:00</span>
          </div>
        </div>
      </Card>

      {/* 标签卡片 */}
      <TagComponent />
    </div>
  );
};

export default SidebarTags;
